<template>
  <div id="main">
    <div class="head">
      <div class="logo"></div>
      <div class="title">
        <img :src="titleImg" alt="" />
        <div class="subTitle" ref="subTitle">
          <p>{{ avtiveTitle }}</p>
        </div>
        <marquee direction="left" scrollamount="30" class="subTitle">
          {{ avtiveTitle }}
      </marquee>
      </div>
    </div>
    <div class="siginList">
      <!-- <div @click="play('测试语音，我爱你')">点击11111</div> -->
      <div class="itemBox">
        <div class="item" v-for="item in hasSigninList" :key="item.id">
          <div class="avatar">
            <div
              class="avatar1"
              :style="{ backgroundImage: `url(${item.headImg || '1'})` }"
            ></div>
            <div
              class="avatar2"
              :style="{
                backgroundImage: `url(${
                  computeLevelColor(item).levelAvatar || '2'
                })`
              }"
            ></div>
          </div>
          <div
            class="bottom"
            :style="{ background: computeLevelColor(item).color }"
          >
            <p class="name">{{ item.userName }}</p>
            <p class="level">{{ item.bigLevelName }}</p>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!-- <HelloWorld msg="Vite + Vue" /> -->
</template>
<script setup>
import { ref, watch } from 'vue'
import Speech from 'speak-tts'
import lv1 from './assets/lv1.png'
import lv2 from './assets/lv2.png'
import lv3 from './assets/lv3.png'
import lv4 from './assets/lv4.png'
import titleImg from './assets/text@2x.png'
import request from './axios'
// import HelloWorld from './components/HelloWorld.vue'
const avtiveTitle = ref('')
// 请求已经签到的人员列表
const hasSigninList = ref([]) // 已经签到了的列表
// 获取地址中的参数
const getQueryParams=()=> {  
  const queryString = location.href.split('?')[1];  
  const params = queryString.split('&');  
  console.log('params: ', params);
  const result = {};  
  
  params.forEach(param => {  
    const [key, value] = param.split('=');  
    result[key] = value;  
  });
  console.log('result: ', result);
  return result;  
}
const activityId = getQueryParams().activityId
console.log('activityId: ', activityId);
request.post('/screen/init',{"activityId": activityId}).then((res) => {
  console.log('获取已签到',res)
  avtiveTitle.value = res?.data?.title || '2003年11月西安天谷美缝会员会'
  hasSigninList.value = res?.data?.signInList
  console.log('hasSigninList: ', hasSigninList)
})
// 计算会员颜色
const computeLevelColor = (item) => {
  if (item.bigLevel === 'BlackDiamond') {
    return {
      levelAvatar: lv1,
      color: '#FDDD8A'
    }
  } else if (item.bigLevel === 'GlodDiamond') {
    return {
      levelAvatar: lv2,
      color: '#F9F2B5'
    }
  } else if (item.bigLevel === 'RedDiamond') {
    return {
      levelAvatar: lv3,
      color: '#FFE3E3'
    }
  } else {
    return {
      levelAvatar: lv4,
      color: '#ECF2FF'
    }
  }
}
// 语音播放
const speech = ref(null)
const speechInit = () => {
  speech.value = new Speech()
  speech.value.setLanguage('zh-CN')
  // speech.value.setVoice('Fiona')
  speech.value.setRate(4)
  speech.value.setVolume(0.1)
  speech.value.setPitch(2)

  speech.value.init().then(() => {
    console.log('初始化完毕')
  })
}
speechInit()
const play = (text) => {
  console.log('播报text: ', text)
  speech.value
    .speak({
      text: text,
      listeners: {
        onend: () => {}
      }
    })
    .then(() => {
      console.log('播报成功aaaaaaaa')
    })
}
setTimeout(() => {
  play('黄金会员张三签到成功')
  play('黑钻会员王六签到成功')
}, 1000)

// websocket连接
const socket = ref(null)
const wsUrl = ref(`${import.meta.env.VITE_BASE_URL_WS}/screen/${activityId}/${new Date().getTime()}`)
// 待播报的列表
const playList=ref([])
const initWebSocket = () => {
  socket.value = new WebSocket(wsUrl.value)
  socket.value.onopen = () => {
    console.log('WebSocket connection opened.')
  }
  socket.value.onmessage = (event) => {
    console.log('Received WebSocket message:', event.data)
    playList.value.push(event.data.data)
  }
  socket.value.onerror = (error) => {
    console.error('WebSocket error:', error)
  }
}
initWebSocket()

watch(
  () => playList.value,
  (data) => {
    console.log('data: ', data);
  },
  {
    deep: true,
  },
);
console.log('当前环境', import.meta.env)
</script>

<style scoped lang="scss">
@keyframes Marquee {
  0% {
    transform: translate(0, 0);
  } /* 初始位置 */
  100% {
    transform: translate(-100%, 0);
  } /* 结束位置 */
}
#main {
  background: #7c070a;
  width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;
  background-image: url(./assets/bg@2x.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  .head {
    padding-bottom: 45px;
    position: relative;
    display: flex;
    justify-content: center;

    .logo {
      background-image: url(./assets/logo@2x.png);
      background-repeat: no-repeat;
      background-size: 100%;
      width: 157px;
      height: 95px;
      position: absolute;
      left: 57px;
      top: 34px;
    }
    .title {
      img {
        margin-top: 44px;
        width: 29.166vw;
      }
      .subTitle {
        color: #fff5e5;
        font-family: Alimama ShuHeiTi;
        font-size: 72px;
        text-shadow: 2px 2px 6px #99131a;
        max-width: 80vw;
        overflow: hidden;
        white-space: nowrap; /* 防止文字换行 */
        p {
          display: inline-block; /* 将文本设置为内联块，使其可以水平滚动 */
          padding-left: 100%; /* 从右侧开始滚动 */
          animation: Marquee 5s linear infinite; /* 应用动画 */
        }
      }
    }
  }
  .siginList {
    display: flex;
    flex-wrap: wrap;
    padding: 0 4vw;
    height: calc(100vh - 350px);
    overflow-x: hidden;
    overflow-y: auto;
    justify-content: center;
    &::-webkit-scrollbar {
      display: none;
    }
    .item {
      display: inline-block;
      width: 136px;
      background: red;
      margin: 0 12px 24px 12px;
      text-align: center;
      .avatar {
        width: 128px;
        height: 128px;
        padding: 4px;
        background: #ffffff;
        display: flex;
        justify-content: center;
        align-items: center;
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 100%;
        position: relative;
        .avatar1 {
          width: 98px;
          height: 98px;
          border-radius: 50%;
          overflow: hidden;
          background-position: 0 0;
          background-repeat: no-repeat;
          background-size: 100%;
          position: absolute;
          z-index: 9;
        }
        .avatar2 {
          width: 128px;
          height: 128px;
          background-position: 0 0;
          background-repeat: no-repeat;
          background-size: 100%;
          position: absolute;
          z-index: 99;
        }
      }
      .bottom {
        .name {
          font-size: 20px;
          color: #000000;
          padding-top: 6px;
        }
        .level {
          font-size: 15px;
          color: #000000;
          margin-top: 3px;
          padding-bottom: 6px;
        }
      }
    }
  }
}

// .logo {
//   height: 6em;
//   padding: 1.5em;
//   will-change: filter;
//   transition: filter 300ms;
// }
// .logo:hover {
//   filter: drop-shadow(0 0 2em #646cffaa);
// }
// .logo.vue:hover {
//   filter: drop-shadow(0 0 2em #42b883aa);
// }
</style>
